<template>
  <div>
<!--    :rules="userRules" ref="user"-->
    <el-form :model="user"   label-width="80px" :rules="CenterRules" status-icon ref="user">
<!--      prop="name"-->
      <el-form-item label="姓名" prop="username">
        <el-input v-model="user.username"  style="width: 217px;" >
        </el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="user.password"  style="width: 217px;" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="text" placeholder="用户性别">
          <el-option
            v-for="item in options"
            :key="item.text"
            :label="item.label"
            :value="item.text">
          </el-option>
        </el-select>
      </el-form-item>

      <!--     图片-->
<!--      <el-form-item label="头像">-->
<!--        <el-image-->
<!--          style="width: 100px; height: 100px"-->
<!--          :src="'/api'+doctor.path"-->
<!--          :fit="fit"></el-image>      -->
<!--      </el-form-item>-->
      <!--     图片上传-->
      <el-form-item label="头像">
        <el-upload
          action
          list-type="picture-card"
          :auto-upload="false"
          :file-list="fileList"
          :limit="1"
          :on-change="changeImg"
          :on-remove="removeImg"
          margin-left="20px"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="角色">
        <!--        <el-checkbox-group v-model="role">-->
        <!--          <el-checkbox v-for="item in roles" :label="item.id">-->
        <!--            {{item.name}}-->
        <!--          </el-checkbox>-->
        <!--        </el-checkbox-group>-->
        <el-radio-group v-model="role">
          <el-radio  v-for="item in roles" :label="item.id">
            {{item.name}}
          </el-radio>
        </el-radio-group>

      </el-form-item>

<!--      <el-form-item label="会员">-->
<!--        <el-select v-model="mbid" placeholder="用户会员" >-->
<!--          <el-option-->
<!--            v-for="item in option"-->
<!--            :key="item.mbid"-->
<!--            :label="item.members"-->
<!--            :value="item.mbid">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item label="余额">
        <el-input v-model="user.money"  style="width: 217px;" :disabled="true"></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onAdd('user')">添加</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "userAddView",
  data(){       //data:{}
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('姓名不能为空'));
      }
      setTimeout(() => {
        if (value.length>5) {
          callback(new Error('姓名不能超过5个字符'));
        }else{
          callback();
        }
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if(value.length==0) {
        callback(new Error('长度在 1 到 5 个字符'));
      }
      setTimeout(() => {
        if (value.length>5) {
          callback(new Error('密码不能超过5个字符'));
        }else{
          callback();
        }
      }, 1000);
    };

    // var username = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('不能为空'));
    //   }
    // };
    //   var password = (rule, value, callback) => {
    //     if (value === '') {
    //       callback(new Error('请输入密码'));
    //     } else {
    //       if (this.user.password !== '') {
    //         this.$refs.ruleForm.validateField('checkPass');
    //       }
    //       callback();
    //     }
    // };
    return {
      user:{
        username:'',
        money:'0.0',
        password:'',
      },
      options: [{
        text:1,
        label: '男',
      }, {
        text:2,
        label: '女',
      },],
      text: '',
      member:[],
      option: [
      ],
      mbid: '',
    //  角色
      role:0,   //用户当前的角色
      roles:[
      ], //所有的角色
      //选取文件的数组
      fileList:[
        {
          name: '',
          url: '',
        }
      ],
      CenterRules:{
        username: [
          { validator:checkUsername,message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        // state: [
        //   { required: true, message: '请选择用户性别', trigger: 'change' }
        // ],
        // role: [
        //   { required: true, message: '请选择用户角色', trigger: 'change' }
        // ],
      },



    }
  },
  //获取数据
  created(){
    axios({
      url: '/api/role/queryRoleAll',
      method: 'post',
      headers:{"Authorization":"Bearer "+this.$store.state.user.token}
    }).then(res => {
      // console.log(res.data.data)
      this.roles=res.data.data
    })



  },

  methods:{
    onAdd(formName){
      this.$refs[formName].validate(validate=> {
        if(validate){
          //创建表格对象
          var formData = new FormData()
          //(1)用户姓名  密码   余额
          for (const key in this.user){
            // console.log(key)
            // console.log(this.user[key])
            formData.append(key,this.user[key])
          }
          // for (const key in this.fileList) {
          //   formData.append("files",this.fileList[key].raw)
          // }
          //(2)用户的性别
          formData.append("state",this.text)
          // alert(this.text)
          //(3)用户的角色
          // for (const key in this.role) {
          //   this.role=arr[key].id
          // }
          formData.append("rids",this.role)
          //(4)用户的会员
          // formData.append("mbid",this.mbid)
          // alert(this.genders)
          // 将fileList中的文件添加到formData中 循环添加文件对象中的raw 后台接收的二进制
          for (const key in this.fileList) {
            formData.append("files",this.fileList[key].raw)
          }
          //请给我写一个确定添加的前置条件
          if(confirm("确定要添加吗")) {
            axios({
              url: "/api/user/addUser",
              method: "post",
              data: formData,
              //添加请求头
              headers:
                {"Authorization":"Bearer "+this.$store.state.user.token,
                "Content-Type": "multipart/form-data"}
              // headers: {"Content-Type": "multipart/form-data"}
            }).then(res => {
              if(res.data.code==403){
                this.$message({
                  message: res.data.message,
                  type:'error'
                })
              }else {
                this.$message({
                  message: '添加成功',
                  type:'success'
                });
                //返回医生信息表
                this.$router.push("/user")
              }

            })
          }
        }else{
          this.$message({
            message: '请根据提示修改信息',
            type:'error'
          })
        }
      })


      },





    cancel(){
      this.$router.push("/user")
    },

    //删除文件
    removeImg(file){
      //根据uid删除对应的文件
      for (const key in this.fileList) {
        if (this.fileList[key].uid === file.uid) {
          this.fileList.splice(key, 1)
        }
      }
    },
    //添加图片
    changeImg(file){
      //直接将文件添加到数组中
      this.fileList.push(file)
      console.log("添加"+file.name)
    },


  },



}
</script>

<style scoped>

</style>
